<template>
  <div class="scroll">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide :class="{'active':selected==index}" v-for="(slide, index) in slider" :key="index">{{slide.group_name}}</swiper-slide>
      </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
      swiper,
      swiperSlide
  },
  props:{
      slider: Array,
  },
  data () {
    return {
      selected:0,
      swiperOption: {
        freeModeMomentum : false,
        spaceBetween: 0,
        freeMode: true,
        slidesPerView: "auto",
        on: {
          click: ()=> {
            let swiper = this.$refs.mySwiper.swiper;
            let i = swiper.clickedIndex;
            this.selected = i;
            let index = this.slider[i].group_id;
            let type = this.slider[i].com_system;
            this.$emit('change',{index,type,i});
          }
        },
        // loopedSlides: 4,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted () {
    // console.log(this.$set)
    //可以使用swiper这个对象去使用swiper官网中的那些方法
    //  console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(0, 0, false);
  },
}
</script>

<style lang="less" scoped>
.scroll{
  width: 100%;
  box-shadow: 0 0.04rem 0.1rem 0.03rem #e6e6e6;
  .active{background: #C0E6D1}
}

  .teamTabs{
    display: flex;
    width: 100%;
    overflow: hidden;
    margin-top: 0.05rem;
  }
  .swiper-slide{
		width: auto!important;
		padding: 0 0.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #fff;
    white-space: nowrap;
    // width: 2rem;
    border-right: 1px #dfdfdf solid;
    min-width: 20%;
    // padding: 0 0.4rem;
  }
</style>
